<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <el-row>
            <el-col>
              <el-button type="primary" @click="opendAdd">+新增角色</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="date" label="序号" type="index">
            </el-table-column>
            <el-table-column prop="name" label="角色名"> </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="{ row }">
                <el-button type="text" @click="openRole(row)"
                  >权限分配</el-button
                >

                <el-button type="text" @click="eidtClick(row)">修改</el-button>
                <el-button type="text" @click="deletClick(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <!-- ------------------------------------------------------- -->
        <el-tab-pane label="配置管理" name="second">
          <el-form
            style="width:500px"
            label-width="100px"
            :model="myform"
            ref="myform"
          >
            <el-form-item label="企业名称">
              <el-input disabled v-model="myform.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input disabled v-model="myform.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="公式电话">
              <el-input disabled v-model="myform.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input disabled v-model="myform.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input disabled v-model="myform.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限面板 -->
    <setrole ref="myrole" :myname="myname" :showRole.sync="showRole"></setrole>
  </div>
</template>

<script>
import {
  getRoleListApi,
  updateRoleApi,
  addRoleApi,
  deleteApi,
  getCompanyApi
} from "@/api/setting";
import setrole from "./components/setRole.vue";
export default {
  components: { setrole },
  data() {
    return {
      activeName: "first",
      // 数据源
      tableData: [],
      // 页面
      page: 1,
      // 页容量的集合
      pageSizes: [2, 4, 6, 8, 10],
      // 页容量
      pageSize: 2,
      // 总条数目
      total: 0,
      // 弹出显示框
      dialogFormVisible: false,
      form: {
        name: "",
        description: ""
      },
      // 企业信息
      myform: {},
      // 控制面板显示与隐藏
      showRole: false,
      // 权限名字
      myname: ""
    };
  },
  methods: {
    // 打开权限分配面板
    openRole(row) {
      this.showRole = true;
      // 调用方法得到当前角色对应的权限详情
      this.$refs.myrole.getRightById(row.id);
      this.myname = row.name;
    },
    // 页面容量触发时发生改变
    handleSizeChange(size) {
      this.pageSize = size;
      // 重新更新对象
      this.getRoleList();
    },
    // 页面发生改变
    handleCurrentChange(page) {
      this.page = page;
      // 重新更新对象
      this.getRoleList();
      // console.log(page)
    },
    // 渲染角色
    async getRoleList() {
      let res = await getRoleListApi({
        page: this.page,
        pafesize: this.pageSize
      });
      // console.log(res)
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
    // 编辑角色
    eidtClick(row) {
      this.dialogFormVisible = true;
      this.form = { ...row };
    },

    async submit() {
      // 判断当前的操作
      if (this.form.id) {
        // 提交编辑后的数据到服务器
        await updateRoleApi(this.form);
      } else {
        // 新增操作
        await addRoleApi(this.form);
      }
      // 更新数据
      this.getRoleList();
      // 提示成功
      this.$message(this.form.id ? "修改成功" : "新增成功");
      // 关闭面板
      this.dialogFormVisible = false;
      // 清空数据
      this.form = {
        name: "", // 角色名
        description: "" // 描述
      };
    },
    // 新增按钮
    opendAdd() {
      // 显示弹窗
      this.dialogFormVisible = true;
    },
    // 删除按钮
    async deletClick(row) {
      await deleteApi(row.id);
      this.getRoleList();
      this.$message("删除成功");
    },
    // 企业信息
    async getCompany() {
      let id = this.$store.getters.userInfo.companyId;
      let res = await getCompanyApi(id);
      // console.log(res)
      this.myform = res.data;
      // console.log(this);
    }
  },
  components: {
    setrole: () => import("./components/setRole.vue")
  },
  created() {
    this.getRoleList();
    this.getCompany();
  }
};
</script>

<style></style>
